<template>
    <div>
            <div class="title">周末去哪儿</div>
    <ul style="background-color:#eee;">
      <li class="item" style="margin-bottom:6px;background-color:white;" v-for="item of RecommendList" :key="item.id">
          <div class="item-img-wrapper">
        <img class="item-img" :src="item.imgUrl" />
        </div>
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
        </div>
      </li>
    </ul>
    </div>
</template>

<script>
export default {
     name: 'HomeRecommend',
      data() {
          return {
              RecommendList:[{
        id:'001',
        imgUrl:'http://img1.qunarzz.com/sight/source/1505/d5/abe8a48a6ef8bf.jpg_r_640x214_7c41cc81.jpg',
        desc:'到武汉感受神奇的热干面之都',
        title:'武汉必打卡'
    },
    {
        id:'002',
        imgUrl:'http://img1.qunarzz.com/sight/source/1505/fe/2533da6335a59d.jpg_r_640x214_9fb62f4b.jpg',
        desc:'人间四月芳菲尽，武汉踏青赏花正当时',
        title:'武汉踏青赏花胜地'
    },
    {
        id:'003',
        imgUrl:'http://img1.qunarzz.com/sight/source/1505/4f/95a94c90ef3521.jpg_r_640x214_345412f9.jpg',
        desc:'远离喧嚣的都市，带孩子去一个幽静，清新的天然“氧吧”，呼吸新鲜空气，亲近自然健康成长',
        title:'开启亲子时光'
    }, 
    {
        id:'004',
        imgUrl:'http://img1.qunarzz.com/sight/source/1507/e0/4aae49007c8a64.jpg_r_640x214_65a42783.jpg',
        desc:'周末，想去哪儿就去哪儿~',
        title:'周末出游乐翻天'
    }]
          }
      }
    
  
}

</script>

<style lang="stylus" scoped>
    ul,li,body{
        margin 0
        padding 0
    };

  .title
    line-height: 3rem
    background: #eee
    text-indent: .5rem
    background-color white
    font-weight bold
    font-size 16px
  .item-img-wrapper
    overflow: hidden
    height: 0
    padding-bottom: 37.09%
    .item-img
      width: 100%
  .item-info
    padding-bottom .5rem
    padding-top .8rem
    padding-left .6rem
    .item-title
      line-height: 1rem
      font-size: .9rem
      color #222
      ellipsis()
    .item-desc
      line-height: .8rem
      color: #666
      font-size .6rem
      overflow: hidden
      white-space: nowrap
      text-overflow: ellipsis
</style>
